{% extends "base.html" %}

{% block content %}
  <div class="container-fluid p-5">
    <div class="row justify-content-center">
      <div class="col-md-8 text-center">
        <!-- 403 图标与标题 -->
        <div class="mb-5">
          <div class="d-inline-block p-4 rounded-circle bg-info/10 text-info mb-4">
            <i class="fa fa-lock fa-5x"></i>
          </div>
          <h1 class="display-1 fw-bold text-secondary mb-2">403</h1>
          <h3 class="text-dark">禁止访问</h3>
        </div>

        <!-- 错误信息 -->
        <div class="bg-light p-5 rounded-lg mb-6">
          <p class="text-secondary mb-0">
            抱歉，您没有访问该页面的权限。<br>
            可能是您的账号权限不足，或该页面仅对特定角色开放。
          </p>
        </div>

        <!-- 操作按钮 -->
        <div class="d-flex justify-content-center gap-3 flex-wrap">
          <a href="/dashboard" class="btn btn-primary px-5">
            <i class="fa fa-home me-2"></i>返回首页
          </a>
          <a href="/settings" class="btn btn-secondary px-5">
            <i class="fa fa-cog me-2"></i>查看权限设置
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- 自定义动画 -->
  <style>
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .fa-lock {
      animation: spin 5s linear infinite;
      animation-play-state: paused;
    }

    .fa-lock:hover {
      animation-play-state: running;
    }
  </style>
{% endblock %}